// 1.默认导入material风格的组件库
import 'package:flutter/material.dart';

class MyApp17 extends StatelessWidget {
  const MyApp17({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 3.创建一个MaterialApp组件（指定应用整体的UI风格：material风格）
    return Scaffold(
        // 1.1 导航
        appBar: AppBar(
          title: const Text('GridView组件'),
          backgroundColor: Colors.pink,
        ),
        // 1.2 主体内容
        body: Padding(
          padding: const EdgeInsets.all(10),
          child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                childAspectRatio: 1.5),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.teal,
                child: Text(
                  '第$index个',
                  style: const TextStyle(color: Colors.white, fontSize: 30),
                ),
              );
            },
            itemCount: 20,
          ),
        ));
  }
}
